import React, {FC, useCallback, useRef} from "react";
import {IComponentProps} from "@bastet/widgets";


export const RootInformation = React.memo((
  { Tabs, TabPane, Group, Panel, Style, Color, Switch, Text, Object, Array, className, onChange, renderProps }: IComponentProps
  ) => {
  return (
    <Tabs>
      <TabPane title="基础">
        <Group>
          {
            renderProps?.info && (
              <Panel
                title="基础"
                field="info"
                data={renderProps?.info}
                config={[
                  { type: 'text', label: '类型', field: 'type' },
                  { type: 'number', label: '年龄', field: 'age' },
                  { type: 'select', label: '职业', field: 'value', options: [{ label: 'label', value: 'value' }] },
                  { type: 'text', label: '地址', field: 'position' },
                  { type: 'area', label: '介绍', field: 'description' },
                  { type: 'boolean', label: '是否党员', field: 'dang' },
                ]}
                onChange={onChange}
              />
            )
          }
          <Text label="vvvv" field="ffff" onChange={onChange}/>
        </Group>

        <Group>
          <Array
            label="数组"
            field="array"
            onChange={onChange}
          />
          <Switch
            label="布尔"
            field="bool"
            onChange={onChange}
          />

          <Text label="文本" field="text" onChange={onChange}/>

          {
            renderProps && (
              <Object
                label="对象"
                field="object"
                renderProps={renderProps}
                onChange={onChange}
              />
            )
          }
          {
            renderProps && (
              <Color
                label="颜色"
                field="color"
                renderProps={renderProps}
                onChange={onChange}
              />
            )
          }
        </Group>

      </TabPane>
      <TabPane title="样式">
        <select className="cb-select">
          <option value="initial">默认</option>
          <option value="relative">相对定位</option>
          <option value="absolute">绝对定位</option>
          <option value="fixed">固定定位</option>
          <option value="inherit">继承父集</option>
          <option value="static">常规布局</option>
          <option value="sticky">粘性定位</option>
        </select>
      </TabPane>
    </Tabs>
  )
})